/**
 * @description 商家入驻
 */
import style from './styles/Form.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Icon, Picker, Toast } from 'wd-mobile'

import { apply } from "api_xukaiyu/app/seller";

import util from "commons/util";
let query = util.parseQueryString();

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            formData: {
                userName: "",// 姓名
                mobile: "",// 手机号
                isInvoice: "",// 是否开具发票
                supplyCat: "",// 供货品类
                supplyPerMonth: "",// 预估每月供货量
                remarks: ""// 备注
            }
        }

        this.isInvoiceData = [
            { label: '是', value: 1 },
            { label: '否', value: 0 }
        ]
    }
    render() {
        return (
            <Fragment>
                <div className={classnames(style.main, "x-scroll-y")}>
                    <div className={style.formWrapper}>
                        <div className={style.inputItem}>
                            <span className={style.inputItemName}>姓名</span>
                            <input type="text" placeholder="请输入" onChange={(e) => {
                                this.inputChange("userName", e.target.value);
                            }} />
                        </div>
                        <div className={style.inputItem}>
                            <span className={style.inputItemName}>手机号</span>
                            <input type="tel" placeholder="请输入" onChange={(e) => {
                                this.inputChange("mobile", e.target.value);
                            }} />
                        </div>
                        <div className={style.inputItem}>
                            <span className={style.inputItemName}>供货品类</span>
                            <input type="text" value={this.state.formData.supplyCat} placeholder="请输入" onChange={(e) => {
                                this.inputChange("supplyCat", e.target.value);
                            }} />
                        </div>
                        <div className={style.inputItem}>
                            <span className={style.inputItemName}>预估每月供货量</span>
                            <input type="text" value={this.state.formData.supplyPerMonth} placeholder="请输入" onChange={(e) => {
                                this.inputChange("supplyPerMonth", e.target.value);
                            }} />
                        </div>
                        <div className={style.inputItem}>
                            <span className={style.inputItemName}>是否开具发票</span>
                            <div className={classnames(style.input, {
                                [style["input-placeholder"]]: !this.state.formData.isInvoice
                            })} onClick={() => {
                                Picker.show({
                                    data: this.isInvoiceData,
                                    value: this.state.formData.isInvoice ? this.state.formData.isInvoice.value : "",
                                    onOk: (res) => {
                                        console.log(res)
                                        this.inputChange("isInvoice", res);
                                    }
                                })
                            }}>
                                <span>{this.state.formData.isInvoice ? this.state.formData.isInvoice.label : "请输入"}</span>
                                <Icon rotate={180} className="x-icon-arrow-left" />
                            </div>
                        </div>
                        <div className={style.inputItem}>
                            <span className={classnames(style.inputItemName, style.inputItemNameRemarks)}>备注</span>
                            <textarea type="text" value={this.state.formData.remarks} placeholder="请输入" onChange={(e) => {
                                this.inputChange("remarks", e.target.value);
                            }} ></textarea>
                        </div>
                        <div className={classnames(style.btnWrapper, "wdskeleton-ignore")} onClick={() => {
                            this.apply()
                        }}></div>
                    </div>
                </div>
            </Fragment>
        )
    }

    // 申请
    apply() {
        // 校验表单
        if (!this.state.formData.userName) {
            Toast.info("请填写姓名");
            return;
        }
        if (!this.state.formData.mobile) {
            Toast.info("请填写手机号");
            return;
        }
        if (!util.isMobile(this.state.formData.mobile)) {
            Toast.info("请填写正确的手机号");
            return;
        }
        if (!this.state.formData.supplyCat) {
            Toast.info("请填供货品类");
            return;
        }
        if (!this.state.formData.supplyPerMonth) {
            Toast.info("请填写预估每月供货量");
            return;
        }
        if (!this.state.formData.isInvoice) {
            Toast.info("请选择是否开具发票");
            return;
        }

        const applyData = { ...this.state.formData };
        applyData.isInvoice = this.state.formData.isInvoice.value;

        // 申请入驻
        apply(applyData).then(res => {
            location.href = "./sellerEnter.html#/Result/success";
        }).catch(res => {
            if (res.code == 100001) {
                location.href = "./sellerEnter.html#/Result/success";
            } else if (res.code == 100002) {
                location.href = "./sellerEnter.html#/Result/hasbeen";
            } else {
                Toast.error(res.message);
            }
        })
    }

    // 表单输入
    inputChange(name, value) {
        const formData = { ...this.state.formData };
        formData[name] = value;
        this.setState({
            formData: formData
        })
    }
}

export default App;